<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <!--外部引用css样式-->
    <link href="css.css" rel="stylesheet" type="text/css"/>
    <!--css嵌入样式-->
    <style type="text/css">
        p{font-size:30px;color: red;}
        h1,h2{color:rebeccapurple;}
        p.special{text-decoration:underline ;}
        #two{color: green;}
        *{font-family:"Plantagenet Cherokee"}
        p em{color: green}
        a:link{color: blue}/*未访问状态*/
        a:valid{color: gray}/*已访问状态*/
        a:hover{color: red}/*鼠标悬浮状态*/
        a:hover{font-size: 20px}
        a:active{color: black}/*激活状态*/
        a{text-decoration: none;}
        div{text-align: center;}/*只对块级元素有效*/
        .textAlign p{width: 50%;margin:0 auto;line-height: 1.6em}
        span{font-size: 14px;}
        .sub{vertical-align: sub;}/*只对行内元素和单元格元素有效*/
        .super{vertical-align: super}


        /*类选择器和伪类：权值为10；*/
        /*ID选择器：权值为100；*/
        /*通配符选择器：权值为0；*/
        /*行内样式：权值为1000,权值相同时的就近原则,根据权值判断优先级*/
        .warp{
            height: 100px;
            width: 100%;
            display: table;
            /*line-height: 100px;*/
            /*text-align: center;*/
        }
        .content{vertical-align:middle;
            display: table-cell;}
        .three{word-spacing: 10px;letter-spacing: 10px;text-transform: uppercase;
        text-decoration: underline}
    </style>

</head>
<body>
<div><img src="img/logo.jpg"/></div>
<div class="warp">
    <div class="content">
        <h1>welcome to website</h1>
        <p>css使网页更美观</p>
    </div>
</div>
<p class="three">css层叠样式表 ilove myself</p>
<p class="two">css层叠样式表 ilove myself</p>
<div class="textAlign">
    <p>
        祁达方：在某个朋友的知乎答案下写了几句感想，现在认为有必要展开谈一谈。
        在面试中被鄙视，这种经历大多数人都不陌生。当被鄙视了，怎样用健康、
        科学的态度来面对这一问题
    </p>
</div>
<a href="http://www.imooc.com" target="_blank" >css选择器学习</a>
<h1><em>css</em>层叠样式</h1>
<h2><em>css</em>层叠样式</h2>
<p>css层叠样式<span class="sub">sub</span></p>
<p>css层叠样式<span class="super">super</span></p>
<p>css层叠样式<span style="vertical-align: -15px">长度值</span></p>
<p>css层叠样式<span style="vertical-align: 15%">长度值</span></p>
<!--css行内样式-->
<h3 style="color: green"><em>css</em>使用方法</h3>
<p style="color: rebeccapurple"><b><em class="cssred">css</em>用于定义html内容在浏览器中的显示样式</b></p>
<h1 class="special">用爬虫爬数据</h1>
<P class="special one">确实意义不大，UI的时候我是直接写的</P>
<p id="two"><em>css</em>确实蛮影响的，还得打开excel</p>

</body>
</html>